//详情页简单的表格展示

<template>
  <div class="single-table">
    <div class="list">
      <!-- 标题 -->
      <div class="list-item">
        <div
          v-show="tableData.itemConfig.length > 0"
          class="sub-item"
          v-for="(configItem, index) in tableData.itemConfig"
          :key="index"
          :style="`width: ${configItem.itemWidth || '100px;'};`"
        >
          {{ configItem.headName }}
        </div>
        <div v-show="tableData.listData.length == 0">
          {{noDataTips}}
        </div>
      </div>
      <!-- 列表 -->
      <div
        class="list-item"
        v-for="(item, index) in tableData.listData"
        :key="index"
      >
        <!-- 表项 -->
        <div
          class="sub-item"
          v-for="(configItem, subIdx) in tableData.itemConfig"
          :key="subIdx"
          :style="`width: ${configItem.itemWidth || '100px;'};`"
        >
          {{ item[configItem.variable] || '-' }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    noDataTips: {
      type: String,
      default:  "备注：该项不包含下级数据" 
    },
    tableData: {
      type: Object,
      default: {
        itemConfig: [
          //  {
          //     headName: "序号",
          //     variable: "index",
          //     itemWidth: "100px"
          //   },
          //   {
          //     headName: "商品名称",
          //     variable: "goodName",
          //     itemWidth: "100px"
          //   },
          //   {
          //     headName: "数量",
          //     variable: "num",
          //     itemWidth: "100px"
          //   },
          //   {
          //     headName: "单价",
          //     variable: "price",
          //     itemWidth: "100px"
          //   },
          //   {
          //     headName: "总价格",
          //     variable: "goodsTotalPrice",
          //     itemWidth: "100px"
          //   },
        ],
        listData: []
      },
    },
    
  },
  data() {
    return {};
  },
  mounted (){
  }
};
</script>

<style lang="scss">
.single-table {
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  .list {
    display: inline-block;
    // border: 1px solid #ddd;
    border-radius: 4px;
    border-right: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
    .list-item {
      display: flex;
      flex-direction: row;
      .sub-item {
        display: flex;
        align-items: center;
        min-width: 100px;
        border-left: 1px solid #efefef;
        border-top: 1px solid #efefef;
        padding: 10px 10px;
      }
    }
  }
}
</style>